<template>
  <el-dialog
    title="评论"
    width="60%"
    v-model="state.dialogDodel"
    @close="cancel"
  >
    <el-form>
      <el-form-item>
        <el-input
          type="textarea"
          v-model="state.content"
          placeholder="文明社会，理性评论"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="default" @click="cancel">取消</el-button>
      <el-button type="primary" @click="handleOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
import { reactive, defineProps, defineEmits, onMounted, watch } from "vue"
import { AddThridCom } from "../api/api";
import user from "../store/modules/user";
const emit = defineEmits(["cancel","ok"])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  comment_id: {
    type: Number,
    default: -1,
  },
  article_id: {
    type: Number,
    default: -1,
  },
  to_user: {
    // type: any,
    default: {},
  },
});
const state = reactive({
  create_time:"",
  dialogDodel: props.visible,
  btnLoading: false,
  content: "",
  cacheTime: 0, // 缓存时间
  times: 0, // 留言次数
  
});
const cancel = (): boolean => {
  emit("cancel", false);
  return false;
};
const handleOk = async (): Promise<void> => {
  //提交前的校验
  if (!props.article_id) {
    ElMessage({
      message: "该文章不存在！",
      type: "error",
    });
    return;
  }
  if (state.times > 2) {
    ElMessage({
      message: "您今天评论的次数已经用完，明天再来评论吧！",
      type: "warning",
    });
    return;
  }
  let now = new Date();
  let nowTime = now.getTime();
  if (nowTime - state.cacheTime < 4000) {
    ElMessage({
      message: "您评论太过频繁，1 分钟后再来评论吧！",
      type: "warning",
    });
    return;
  }
  if (!state.content) {
    ElMessage({
      message: "评论内容不能为空",
      type: "error",
    });
    return;
  }
  let user_id =-1;
  if (window.localStorage.userInfo) {
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    user_id = parseInt(userInfo._id)
  } else {
    ElMessage({
      message: "登录才能评论，请先登录！",
      type: "warning",
    });
    return;
  }
  //  state.btnLoading = true;发送请求
      state.btnLoading = true;
    
        const res=await AddThridCom({
        article_id:props.article_id,
        comment_id:props.comment_id, 
        user_id:user_id, 
        contents:state.content, 
        to_user:props.to_user,
        })
    //  console.log("article_id",props.article_id,"user_id",user_id,"comment_id",props.comment_id,"to_user",props.to_user,"content",state.content)
     
      console.log("res:",res)
      // await service.post(urls.addThirdComment, {    
      //   article_id: props.article_id,
      //   user_id,
      //   comment_id: props.comment_id,
      //   to_user: JSON.stringify(props.to_user),
      //   content: state.content,
      // });

      state.btnLoading = false;
      state.times++;

      state.cacheTime = nowTime;
      state.content = "";
      emit("ok", false);
      ElMessage({
        message: "操作成功",
        type: "success",
      });
};
watch(props, (val, oldVal) => {
  state.dialogDodel = val.visible;
});
</script>

<style scoped lang="less">
.dialog-footer {
  text-align: right;
}
</style>
